<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
    <link rel="stylesheet" href="">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/article.css">
</head>
<body>
<!--导航栏开始-->
<nav class="navbar  navbar-expand-lg fixed-top navbar-light bg-light mb-6">

    <div class="container">
        <a class="navbar-brand navbar-img-link" href="#">
            <img src="./imgs/brandImg.jpg" class="brand-img" width="40" height="40" alt="">
            EasyBlog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item mr-2">
                    <a class="nav-link" href="#">发现</a>
                </li>
                <li class="nav-item mr-2">
                    <a class="nav-link" href="#">关注</a>
                </li>
                <li class="nav-item mr-2">
                    <a class="nav-link" href="#">专题</a>
                </li>
                <li class="nav-item mr-2">
                    <a class="nav-link" href="#">消息</a>
                </li>
            </ul>

            <form class="form-inline mr-auto">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
            </form>

            <div class="mr-3">
                <div class="dropdown user-img-dropdown mr-3">
                    <a class="nav-link dropdown-toggle navbar-img-link" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img src="./imgs/userImg.jpeg" alt="" style="width: 40px;height: 40px; border-radius: 20px">
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">
                            <i class="fa fa-user mr-2" aria-hidden="true"></i>
                            我的主页</a>
                        <a class="dropdown-item" href="#">
                            <i class="fa fa-book mr-2" aria-hidden="true"></i>
                            我的文章</a>
                        <a class="dropdown-item" href="#">
                            <i class="fa fa-cog"></i>
                            我的资料</a>
                        <a class="dropdown-item" href="#">

                            退出</a>
                    </div>
                </div>
                <a href="#" class="btn btn-info">写文章</a>
            </div>
        </div>
    </div>
</nav>
<!--导航栏结束-->

<div class="container article-container">
    <div class="row justify-content-center">
        <div class="col-sm-8">
            <div class="article-title mb-4">
                <h1>
                    假如我会飞
                </h1>
                <hr>
            </div>
            <div class="article-author">
                <div class="row">
                    <div class="col-sm-1 ">
                        <img src="./imgs/userImg.jpeg" alt="用户头像" class="user-header-img">
                    </div>
                    <div class="col-sm">
                        <div class="mb-1">
                            <a href="#" class="article-author-name mr-2">库日天</a>
                            <button class="btn btn-sm btn-success" id="addConcernBtn"><i class="fa fa-plus mr-1"
                                                                                         aria-hidden="true"></i>关注
                            </button>
                        </div>
                        <p class="article-statistics">
                            <span class="mr-2"><i class="fa fa-clock-o mr-1"
                                                  aria-hidden="true"></i>2017.11.23 12.12 </span>
                            <span class="mr-2"><i class="fa fa-eye mr-1" aria-hidden="true"></i>234</span>
                            <span class="mr-2"><i class="fa fa-heart mr-1" aria-hidden="true"></i>45</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="article-content mb-4">

                <p><br></p>
                <p>最近一个很火的社区出了一篇帖子，发帖者是一位男性。</p>
                <blockquote>
                    <p>他说，每次看泰坦尼克号上让妇女小孩先走类似的情节，<b>我都很郁闷。凭什么男人就该死？</b></p>
                    <p><b>我宁愿抓阄，公平。</b>要不就让头等舱先走，毕竟人家多花钱了。</p>
                    <p>动不动be a man，我觉得挺傻的。我实在没有底气说女人先走。相反，对于那些（把生存机会让给女人的）感动自己的糊涂男人，我觉得很生气，甚至是屈辱。</p>
                </blockquote>
                <p>帖子一出，留言群炸了。骂人的有，说他不像个男人的也有，也有人说，要是我也会去抢个位置的。</p>
                <p>我不觉得有这样的想法是件多可耻的事情。说实话，生死关头谁不想活下去。明明老子力气大可以抢到逃生位置，凭什么因为你是女人就要让给你？</p>
                <p>人类讲到底就是生物，生物的第一要义是生存，在生存前面，绅士风度什么的都是扯淡。</p>
                <p>但仔细一想，这里其实有件很有意思的事情，不知道发言的这位男性有没有想过：<b>说起来男人们应该都是这么想，那为什么这个以男性为主导的社会，还是形成了让妇女儿童先走的社会公则？</b></p>
                <p>我决定来聊聊。可是身为既得利益方的女性，好像不管怎么说都有得了便宜还卖乖的嫌疑。</p>
                <p>所以我会换个类似场景，在这个场景里没有男人。</p>
                <p><br></p>
                <hr>
                <p><br></p>
                <p>假如我和我的孩子一起在一艘船上，船上只有女人和小孩，没有成年男人。这时候巨浪涛天，船马上要沉了，救生艇的位置不够，只能有一部分人活下来。</p>
                <p>所有人都争先恐后往前挤，我们这些女人们互相撕扯，谁也不让谁，救生艇被挤得摇摇晃晃，大船马上要沉了。</p>
                <p>怀里的孩子被吓坏了，哭得撕心裂肺。猜我这时候会说什么？</p>
                <p>我一定会用最大的力气，尖叫着喊出那句话：</p>
                <p><b>让小孩子先走！</b></p>
                <p>这跟道德没有一毛钱关系，相信我，我没那么高尚，要是能靠一己之力把船抢下来我一定会抢的。凭什么我不能活着？</p>
                <p>但如果我真这么干的话，很可能我跟我孩子俩人都会被拉下船，一个也活不成。</p>
                <p>所以在这种时候，我只能喊出那句话：“让小孩子先走”，我的孩子才有可能取得生存优先权，被人群举起来送到前面，上船。</p>
                <p>然后我再去抢下一个生存机会。</p>
                <p>如果只能活一个，我一定会把机会给孩子，让他活着。</p>
                <p><br></p>
                <hr>
                <p><br></p>
                <p>其实在船快要沉了的时候，是没有什么男人女人、老人小孩的区别的。<b>船上只有两种人：有实力逃生的人，和没有实力逃生的人。</b></p>
                <p>让妇女儿童先走，是有实力的人为了保护自己的老婆孩子，在那个情况下做出的妥协：</p>
                <p>既然没有办法打败其他所有人自己一家人先全部上船，那就达成冷静一致的协议，让妇女儿童先走。</p>
                <p>就像一个网友说的：<b>你想让你的老婆孩子先走吗，那就得让我的老婆孩子也先走。</b></p>
                <p>可你说，我是单身狗啊，凭什么我要放弃自己的生存机会去救你的老婆孩子？</p>
                <p>很现实也很简单，因为“让她们先走”的这个声音比较大，盖过了你“我要走”的声音。</p>
                <p><br></p>
                <hr>
                <p><br></p>
                <p>很多时候，<b>一个群体做决策的时候，还真是哪个声音大就听谁的。</b></p>
                <p>在泰坦尼克上，即将要沉没的乘客群体发出了“让女人先走”的声音。</p>
                <p><b>这个声音首先来自于社会公约的力量</b>。这是人类社会进化多年形成的文明，是整个社会约定俗成，被绝大多数人认可，根深蒂固的东西。</p>
                <p>你很难说在要死的时候道德约束有什么用，可它潜伏在深处的巨大影响远超你我相像。所以你看，泰坦尼克上有男人“凭实力”抢船的时候，大副就敢冷不丁掏出枪来把他崩了。</p>
                <p><b>这个声音还来自于像我上面举的例子一样</b>，深爱孩子的父母，深爱妻子的男人。<b>有实力逃生有话语权的人，选择了先救自己在意的、没有实力逃生的人。</b></p>
                <p>这和性别无关，船上有一千个母亲，一千个丈夫，就会有明明抢不到船却会被先送走的一千个孩子，一千个女人。</p>
                <p><b>人性是经不起考验。</b></p>
                <p><b>但人性往往会比我们想象的更经得起考验。</b></p>

            </div>


            <div class="clearfix mb-4">
                <div class="article-footer float-right ">
                    © 著作权归作者所有
                </div>
            </div>

            <div class="like-article-btn text-center mb-5">
                <button class="btn btn-outline-danger btn-lg text-center" id="likeArticleBtn">
                    喜 <i class="fa fa-heart-o"></i> 欢
                </button>
                <hr>
            </div>


            <div class="comment-area">

                <div class="row mb-4">
                    <div class="col-1">
                        <img src="./imgs/userImg.jpeg" alt="用户头像" class="user-header-img">
                    </div>
                    <div class="col-sm">
                            <textarea name="comment" id="" class="form-control mb-1" cols="" rows="3"
                                      placeholder="写下你的评论"></textarea>
                        <button type="button" class="btn btn-success float-right comment-btn" data-blog-id="3">评论
                        </button>
                    </div>
                </div>

                <div>
                    <div class="clearfix">
                        <h5 class="float-left">123条评论</h5>
                        <div class="float-right">
                            <button class="btn btn-secondary btn-sm">按时间正序排列</button>
                            <button class="btn btn-secondary btn-sm">按时间倒序排列</button>
                        </div>
                    </div>
                    <hr>

                    <div class="comment-list">
                        <div class="comment-item  mb-4">
                            <div class="media">
                                <img class="align-self-start mr-3 user-header-img" src="./imgs/userImg.jpeg">
                                <div class="media-body">
                                    <div class="mt-0">
                                        <a href="#" class="comment-user-name">超人挤地铁</a>
                                        <div class="comment-time">2017.11.22 12.12</div>
                                    </div>
                                    <div class="mb-2">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
                                        scelerisque ante
                                        sollicitudin.
                                    </div>

                                    <div>
                                        <a href="#" class="sub-comment-btn" data-blog-id="2" data-comment-id="3"
                                           data-to-user-id="5" data-first-reply="true">
                                            <i class="fa fa-comment-o"></i>回复
                                        </a>
                                    </div>

                                    <!--子评论区域-->
                                    <div class="sub-comment-list mt-1">
                                        <div class="sub-comment-item ml-4">
                                            <span class="mr-2">
                                                <a href="#">无敌萤火虫</a>
                                                :
                                            </span>
                                            <span class="sub-comment-content">libero, in gravida nulla. </span>
                                            <div class="sub-comment-time mt-1">
                                                <span class="ml-1">2017.11.12</span>
                                                <a href="#" class="sub-comment-btn ml-4" data-blog-id="2"
                                                   data-comment-id="3" data-to-user-id="5" data-first-reply="false"
                                                   data-user-name="无敌萤火虫">
                                                    <i class="fa fa-comment-o"></i>
                                                    回复
                                                </a>
                                            </div>
                                        </div>


                                        <div class="sub-comment-input ml-3">
                                            <textarea name="subComment" class="form-control mb-1" cols="" rows="3"
                                                      placeholder="写下你的评论"></textarea>
                                            <button type="button"
                                                    class="btn btn-success float-right sub-comment-reply-btn">
                                                回复
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script id="commentItemTemplate" type="text/x-handlebars-template">
    <div class="comment-item  mb-4">
        <div class="media">
            <img class="align-self-start mr-3 user-header-img" src="./imgs/userImg.jpeg">
            <div class="media-body">
                <div class="mt-0">
                    <a href="#" class="comment-user-name">{{userName}}</a>
                    <div class="comment-time">{{commentDate}}</div>
                </div>
                <div class="mb-2">
                    {{commentContent}}
                </div>

                <div>
                    <a href="#" class="sub-comment-btn" data-blog-id="{{blogId}}" data-comment-id="{{commentId}}"
                       data-to-user-id="{{currentUserId}}"
                       data-first-reply="true">
                        <i class="fa fa-comment-o"></i>回复
                    </a>
                </div>

                <div class="sub-comment-list mt-1">
                    <div class="sub-comment-input ml-3">
                            <textarea name="subComment" class="form-control mb-1" cols="" rows="3"
                                      placeholder="写下你的评论">
                            </textarea>
                        <button type="button" class="btn btn-success float-right sub-comment-reply-btn">
                            回复
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</script>

<script src="./libs/jquery-3.2.1.js"></script>
<script src="./libs/popper.js"></script>
<script src="./libs/bootstrap.js"></script>
<script src="./JS/article.js"></script>
<script src="libs/handlebars-v4.0.11.js"></script>
</body>
</html>